// table
import {Row,Col,Form,Input,Button,Select , message , Table, Tag , Avatar,Popconfirm, Modal} from "antd"
import {useEffect,useRef,useState} from "react"
import {inject, observer} from "mobx-react"
import { baseURL } from "../../api/request";
import './index.scss'
import {
    UserOutlined,
    DeleteOutlined
  } from '@ant-design/icons';

import { roleList } from "../../utils/commom";
import { ColumnsType } from "antd/lib/table";
import { ajax } from "../../api";
import myinfo from "../../mobx/info";
import { withRouter } from "react-router-dom";
const {Search} = Input
const {Option} = Select


function Stulist(props:any) {
  const {userList,userInfo,getUserListAsync,getUserList} = props.info
 

  useEffect(()=>{
    getUserListAsync({})
    // console.log(userList[0]);
    
  },[])


 const onConfirm =async (item:any,index:any)=>{
   let res = await ajax.deleteuser({_id:item._id})
   if(res.code == 200){
     var list = userList.filter((val:any)=>val._id!=item._id)
     getUserList(list)
   }
 }




 const columns: ColumnsType<any> = [
  {
    title: '序号',
    align:"center",
    render:(value: any,item: any,index: number)=>{
      return index+1
    }
  },
  {
    title: '姓名',
    align:"center",
    dataIndex: 'username',
    key: 'name',
  },
  {
    title: '头像',
    align:"center",
    render:(item: { avatar: string; },value: any,index: any)=>{
      return (
        item?.avatar ?
          <Avatar style={{cursor:"pointer"}}  src={item?.avatar.replace(/public/,baseURL)} />:
          <Avatar style={{cursor:"pointer"}} icon={<UserOutlined />} />
      )
    }
  },
  {
    title: '身份',
    align:"center",
    render:(item: { role: number; },value: any,index: any)=>{
      return (
        <Tag  color={roleList.find(v=>v.value==item?.role)?.color}> {roleList.find(v=>v.value==item?.role)?roleList.find(v=>v.value==item?.role)?.text:'未知身份' } </Tag>
      )
    }
  },
  {
    title: '手机号码',
    align:"center",
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title:"操作",
    align:"center",
    render:(item: { role: number; },value: any,index: any)=>{
      return (
        userInfo?
        <div>
          <Popconfirm
            title="你确定要删除吗?"
            onConfirm={()=>onConfirm(item,index)}
            okText="确定"
            cancelText="不"
            disabled={ userInfo?.role <= item?.role} 
          >
            <Button type="primary"  disabled={ userInfo.role <= item?.role} size="small" danger style={{margin:"4px"}}>删除</Button>
          </Popconfirm>
          {/* item.role  userInfo.role  */}
          <Button onClick={()=>handleChangeItem(item)} disabled={ userInfo.role <= item?.role} style={{margin:"4px"}} type="primary" size="small"  >修改</Button>
        </div>
        :null
      )
    }
  }
]


const keyword:any = useRef()
const [role, setrole] = useState()
const [show, setshow] = useState(false)
const [form] = Form.useForm()
const [obj,setObj] = useState<any>({})
const todoSearch = ()=>{
  let k = keyword.current.state.value
  // console.log(k);
  getUserListAsync({
    keyword:k,
    role:role
  })
}

const handleChangeItem = (item:any)=>{
  setshow(true)
  form.setFieldsValue({
    role:item.role,
})
  setObj(item)
  console.log(item,obj);
   
 }
const changerole = (v:any)=>{
  console.log(v);
  setrole(v)
}
const conformSet =async ()=>{
const data = form.getFieldsValue()
console.log(data);
const {code,result}:any = await ajax.setuserrole({
  ...data,
  _id:obj?._id
})
if(code==200){
  var list = userList.map((item:any)=>{
    if(item._id==obj._id){
      item.role = data.role
    }
    return item
  })
  getUserList(list)
  setshow(false)
}
}
const handleCancel  = (item:any)=>{
  setshow(false)
}
  return(
    <div className="stulist">
      <h2 style={{textAlign:'center',fontSize:20}}>用户列表</h2>
      <Row style={{marginTop:30}}>
        <Col span={6}>
        <Input ref={keyword} placeholder="请输入搜索关键字"/>
        </Col>
        <Col span={5}>
        <Select onChange={changerole} placeholder="请选择搜索身份">
          {
            roleList.map((l,i)=>(
              <Select.Option value={l.value} key={i}>
                {l.text}
              </Select.Option>
            ))   
                   }
        </Select>
        </Col>
        <Col span={3}>
        <Button danger onClick={todoSearch}>搜索</Button>
        </Col>
      </Row>
      <Row style={{marginTop:40}}>
        <Col>
        <Table
        dataSource={userList}
        columns={columns}
        sticky
        bordered
        id="table"
         rowKey={item=>item?._id}
        pagination={{pageSize:6}}
        >
        </Table>
        </Col>
      </Row>
      <Modal
      title={`修改用户--${obj?.username}`}
      visible={show}
      onOk={conformSet}
      onCancel={handleCancel}
      okText="确定修改"
      okType="danger"
      width={'30%'}
      cancelText="取消修改"

      >
         <Form
                    name="basic"
                    autoComplete="off"
                    form={form}
                    layout={'horizontal'}
                    labelCol={{span:24}}
                    wrapperCol={{span:24}}

                >
                    <Form.Item
                        label="用户身份"
                        name="role"
                        rules={[
                            { required: true, message: '请选择角色!' }
                        ]}
                    >
                        
                        <Select placeholder="请选择用户身份"  >
                            {
                                roleList.map((l,i)=>{
                                    return (
                                        <Select.Option disabled={l.value>=userInfo?.role  }  value={l.value} key={i} >
                                            {l.text}
                                        </Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Form>        
      </Modal>
    </div>
  )



}


export default inject('info')(withRouter(observer(Stulist)))